<template>
    <div class="comment f-cb">
        <ul class="f-cb" v-loading="loading" v-infinite-scroll="load" infinite-scroll-distance="20" infinite-scroll-delay="200">
            <li class="box f-cb" v-for="(item,index) in tableData" :key="index">
                <div class="headPortrait">
                    <img :src="item.avatar ? item.avatar : defaultImg" alt="">
                </div>
                <div class="rights">
                    <h2>{{item.nickname}}</h2>
                    <div class="contentBox">
                        <div class="contentBoxHeight">
                            <p v-html="item.content"></p>
                        </div>
                        <div class="f-cb btns" v-if="item.content.length > 65">
                            <span class="contentBoxOpen" @click="contentBoxTrr($event)">{{$t('account.comment.56hq7qjv94g0')}}</span>
                            <span class="contentBoxClose" @click="contentBoxTrr($event)">{{$t('account.comment.56hq7qjva4s0')}}</span>
                        </div>
                    </div>
                    
                    <div class="f-cb imagesbox" v-if="item.image.length !=0">
                        <el-image :src="inItems" fit="cover" v-for="(inItems,inIindexs) in item.image" :key="inIindexs" :preview-src-list="[inItems]"></el-image>
                    </div>
                    <div class="timer f-cb">
                        {{item.createTime |timestampToTime}}
                        <span class="infos fr" @click="commentShowIs(2, item)"></span>
                        <div class="fabulous_box">
                            <span class="thumbs-up" :class="item.isFabulous==1?'hover':''" @click="giveFabulous(item,$event,index)"></span>
                            <span class="fabulous" v-if="item.fabulousNum != 0 && item.fabulousNum < 1000">{{item.fabulousNum}}</span>
                            <span class="fabulous" v-if="item.fabulousNum != 0 && item.fabulousNum >= 1000">999+</span>
                        </div>
                    </div>
                    <div class="infos-box" v-if="item.reply.length >0">
                        <div class="infi" @click="commentShowIs(3, item, inItem)" v-for="(inItem,inIindex) in item.reply" :key="inIindex">
                            <span class="title">{{inItem.fromNickname}}</span>
                            <span v-if="inItem.isReply!=0" class="call">{{$t('account.comment.56hq7qjvaf40')}}</span>
                            <span v-if="inItem.isReply!=0" class="title">{{ inItem.toNickname }}</span>
                            <span class="title">:</span>
                            <span class="title">{{inItem.content}}</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="icon_lbj" @click="commentShowIs(1)"></div>
        <!-- 评论留言 -->
        <CommentDialog :show="commentShow" :commentObj="commentObj" :repayObj="repayObj" :commentType="commentType" @close="closeList" showObj="commentShow" @reflash="reflash"></CommentDialog>
    </div>
</template>
<script>
    import CommentDialog from "@/components/account/right/CommentDialog.vue";
    import {post_give_fabulous, get_comment} from '@/assets/js/API/user.js'
    export default {
        components: {
            CommentDialog,
        },
        data() {
            return{
                commentShow:false,
                StockData:this.$store.state.index.StockData,
                page:1,
                tableData:[],
                loading:true,
                tableHeight:4,
                commentType: 0, // 1：发表评论，2：回复评论, 3: 回复给回复
                commentObj: {}, // 评论对象
                repayObj: {}, // 回复对象
                userInfo: {}, // 用户信息
                defaultImg: require("@/assets/img/tx.png")
            };
        },
        mounted(){
            this.userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
        },
        methods: {
            contentBoxTrr(event){
                if($(event.target).parents('.contentBox').hasClass('active')){
                    $(event.target).parents('.contentBox').removeClass('active')
                }else{
                    $(event.target).parents('.contentBox').addClass('active')
                }
            },
            load () {
                if(this.tableHeight >= 20){
                    this.loading = true;
                    this.page++
                    this.getComment();
                }
            },
            closeList(show) {
                this[show] = false;
            },
            commentShowIs(i,obj,objSon){
                // console.log(this.userInfo.id,obj,objSon,'commentShowIs')
                if(i == 1){
                    this.commentShow = true;
                }else if(i == 2 ) {
                    this.commentShow = true;
                    this.commentObj = obj;
                }else if( i == 3 ) {
                    this.commentShow = true;
                    this.commentObj = obj;
                    this.repayObj = objSon;
                }else {
                    this.commentShow = false;
                }
                    this.commentType = i;
            },
            // 刷新评论
            reflash() {
                this.loading = true;
                this.page = 1;
                this.tableData = [];
                this.getComment();
            },
            //获取评论列表
            getComment(){
                var _this = this;
                if(_this.loading){
                    get_comment(Object.assign({}, _this.StockData,{page:_this.page,pageSize:20})).then(function(res) {
                        if(res.code == 1){
                            _this.tableData  = [..._this.tableData,...res.data.comment];
                            _this.tableHeight = res.data.comment.length;
                            _this.loading = false;
                        }else{
                            _this.$message({
                                message: response.data.msg,
                                type: "warning"
                            });
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
                 }
            },
            // 评论点赞|取消点赞 
            giveFabulous(item,$event,index){
                if($($event.target).hasClass('hover')){
                    $($event.target).removeClass('hover')
                }else{
                    $($event.target).addClass('hover')
                }
                var _this = this;
                if(_this.tableData[index].isFabulous == 1) {
                    _this.tableData[index].isFabulous = 0;
                }else {
                    _this.tableData[index].isFabulous = 1;
                }
                post_give_fabulous({commentId: item.id}).then(res => {
                    if(res.code == 1){
                        _this.tableData[index].fabulousNum = res.data.fabulousNum;
                    }else{
                        _this.$message({
                            message: response.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(error => {});
            },
        },
        watch:{
            '$store.state.index.StockData':{
                handler(val,old){
                    if(val !==''){
                        this.StockData = val;
                        this.tableData=[];
                        this.page=1;
                        this.loading = true;
                        this.getComment();
                    }
                },
                deep:true
            },
        },
    }
</script>
<style lang="less">
    .comment{
        width: 100%;
        ul{
            width: 100%;
            li{
                display: block;
                padding: 20px;
                border-bottom:1px solid @LightBorderLine;
                .headPortrait{
                    float: left;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    overflow: hidden;
                    // background:url(~@/assets/img/jingzhang.png) no-repeat center;
                    background-size: cover !important;
                    margin-bottom: 30px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .rights{
                    float: right;
                    width: calc(100% - 70px);
                }
                h2{
                    font-size: 14px;
                    color: @fbSix;
                    line-height: 24px;
                }
                .contentBox{
                    width: 100%;
                    margin-bottom: 10px;
                    .contentBoxHeight{
                        max-height: 60px;
                        overflow: hidden;
                    }
                    .btns{
                        text-align: right;
                        span{
                           font-size: 12px;
                            color: @fff;
                            background: @hoverColor;
                            width: 40px;
                            line-height: 26px;
                            height: 26px;
                            text-align: center;
                            float:right;
                            cursor: pointer;
                        }
                        .contentBoxOpen{
                            display: block;
                        }
                        .contentBoxClose{
                            display: none;
                        }
                   }
                }
                .contentBox.active{
                    .contentBoxHeight{
                        height: auto;
                        max-height: 100%;
                    }
                    .btns{
                        .contentBoxOpen{
                            display: none;
                        }
                        .contentBoxClose{
                            display: block;
                        } 
                    }
                }
                p{
                    font-size: 12px;
                    color:@fff;
                    line-height:20px;
                }
                .timer{
                    font-size: 12px;
                    color: @fbSix;
                    line-height: 22px;
                        position: relative;
                    .fabulous_box {
                        float: right;
                        width: 54px;
                        .thumbs-up{
                            width: 22px;
                            height: 22px;
                            display: block;
                            float: left;
                            cursor: pointer;
                            background:url(~@/assets/img/icon_dz.png) no-repeat center;
                            background-size: 100% auto;
                        }
                        .hover{
                            background:url(~@/assets/img/icon_dzl.png) no-repeat center;
                            background-size: 100% auto;
                        }
                        .fabulous {
                            padding-left: 8px;
                            float: right;
                        }
                    }
                    span{
                        width: 22px;
                        height: 22px;
                        display: block;
                        cursor: pointer;
                    }
                    span.infos{
                        background:url(~@/assets/img/icon_pl.png) no-repeat center;
                        background-size: 100% auto;
                        margin-left: 16px;
                    }
                }
                .infos-box{
                    background: @bgColor;
                    margin-top: 7px;
                    padding: 2px 10px;
                    .infi{
                        color: @fff;
                        font-size: 12px;
                        line-height: 22px;
                        cursor: pointer;
                        .title{
                            color: @fff;
                        }
                        .call {
                            color: @fbSix;
                            padding: 0 4px;
                        }
                    }
                    
                }
            }
        }
        .imagesbox{
            width: 100%;
            margin-top: 5px;
            .el-image{
                width: 80px;
                height: 80px;
                margin-right: 7px;
                margin-bottom: 7px;
                float: left;
            }
            .el-image-viewer__wrapper{
                background: rgba(0,0,0,.6);
            }
            .el-image-viewer__close{
                color: @fff;
            }
        }
        .icon_lbj{
            width: 50px;
            height: 50px;
            background-size:50px;
            background-image:url(~@/assets/img/icon_lbj.png);
            background-repeat: no-repeat;
            background-position:center;
            right: 50px;
            top:70%;
            position: fixed;
            cursor: pointer;
        }
        .el-loading-mask{
            background: none;
        }
    }
</style>